<template>
    <!-- 这是two的页面
    <br>
    <input type="text" v-model="objTestVal" id="wenben" ref="iptDom" />
    {{ objVal }}
    <br>
    {{ objTestVal }}
    <button @click="setVal">改变量</button> -->
    <button @click="setSonTestMsg">修改子组件变量</button>
    <child src="https://gitee.com/static/images/logo-black.svg?t=158106664" style="background-color: aquamarine;"
        :params="ziParams" ref="childDom"></child>
</template>
<script setup>
import child from './child.vue'
//按需引入
//provide 穿透 穿透很多层 可以祖孙传值 依赖注入
//provide 和inject 是vue3响应式原理实现的

import { ref, provide } from 'vue'
const ziParams = ref('父组件的变量')
const childDom = ref(null)

//通过父组件修改子组件变量

function setSonTestMsg() {
    childDom.value.testMsg = new Date().getTime()
}
provide('test', '父组件的变量-provide')

//this.$children v3移除了 
// import { nextTick, ref } from 'vue';
// const textVal = ref('')

// //vue 双向绑定
// let a = 123456
// nextTick(() => {
//     document.getElementById('wenben').value = a
// })

// function aaa() {

//     // a = document.getElementById('wenben').value
//     // console.log(a)
//     console.log(textVal.value)
// }

// function setVal() {
//     // textVal.value = new Date().getTime()
//     a = '12334534r'
// }

// import { ref, reactive, watch } from 'vue'
// const textVal = ref('')//string数据类型
// const objVal = reactive({
//     name: 123
// })
// const iptDom = ref(null)
//1 reactive 定义基本数据类型不具备响应式
//2 reactive 只能定义 复杂数据类型才具备响应式
//3 ref定义的变量 必须使用 . value 进行获取和设置
//4 ref还可以找对象 DOM
// let objTestVal = reactive('123')

// function setVal() {
//     textVal.value = new Date().getTime()
//     objTestVal = new Date().getTime()
//     objVal.name = new Date().getTime()
//     console.log(iptDom.value)
// }
// watch(objTestVal, (val) => {
//     console.log(objTestVal, 46)
// })
// watch(textVal, (val) => {
//     console.log(textVal, 49)
// })
// watch(objVal, (val) => {
//     console.log(objVal, 49)
// })
//事件循环机制 event loop
//js是单线程的 由上向下执行 （从上到下）（主线程）
//微任务 （.then .catch .finally .all .race ... async await） 宏任务 (dom渲染 请求队列 定时器相关)
//微任务执行完之后 才会执行宏任务 
// console.log(1)
// setTimeout(() => {
//     console.log(2)
// }, 0)
// console.log(3)
// new Promise((resolve, reject) => {
//     console.log(4)
//     resolve()
// }).then((e) => {
//     console.log(5)
// })
// document.createElement('input')
//虚拟 DOM（Virtual DOM）是一种编程概念，它是真实 DOM（Document Object Model）的 JavaScript 对象表示形式。简单来说，它是对浏览器中实际 DOM 结构的一种轻量级的、内存中的抽象描述
//jsx 内部封装了 看不见 
//事件循环机制执行 1 -> 3 -> 4 -> 5 -> 2


//vue2 生命周期
//创建前 虚拟dom 配置准备好
//后 {data ， methods ，watch}
//挂载前 new vue ({data,methods,watch})
//后 dom生成了
//更新前
//后
//销毁前
//后
// B/S  B代表浏览器的意思 在浏览器运行的项目都叫b/s架构
// C/S 不基于在浏览器运行的项目都叫c/s架构

//响应式原理不一样
//vue2定义响应式变量 vue2基于 Object.defineProperty()  vue3基于 Proxy
// data(){
//     return{
//         name:'222'
//     }
// }
// let obj = { name: 123 }
// Object.defineProperty(obj, 'name', {
//获取变量
//     get() {
//         console.log('get')
//         return this._name
//     },
//修改就触发set
//     set(val) {
//         console.log('set')
//         this._name = val
//     }
// })
// console.log(obj.name)
// defineProperty 绑定的是某一个属性
// proxy 绑定的是一个对象
//this.$set

</script>